<template>
  <!-- icon -->
  <embed
    class="svg"
    src="/images/login/编组.svg"
    type="image/svg+xml"
  >
  <!-- 表单 -->
  <form>
    <input
      type="text"
      placeholder="请输入手机号"
      v-model.trim="obj.userId"
    >
    <input
      type="password"
      placeholder="请输入密码"
      v-model.trim="obj.password"
    >
    <input
      type="password"
      placeholder="确认密码"
      v-model.trim="obj.password2"
    >
    <button @click.prevent="toRegister">
      注册
    </button>
  </form>
  <!-- 跳转登录页 -->
  <router-link
    class="login"
    to="/login"
  >
    已有账号去登录
  </router-link>
</template>

<script setup name='Register'>
import { reactive } from 'vue'
import { registerInfo, login } from '@/api/user'
import { useRouter } from 'vue-router'
import * as dayjs from 'dayjs'

// 声明变量
const times = dayjs()
const router = useRouter()
const obj = reactive({
  userId: null,
  password: null,
  password2: null
})

// 注册业务逻辑
const toRegister = async () => {
  // 结构相关数据
  const { userId, password, password2 } = obj
  // 判断账号密码是否为空
  if (userId !== '' && password !== '' && password2 !== '') {
    // 密码是否相同
    if (password === password2) {
      // 发送用户信息向服务器
      const result = await registerInfo({ userId, password, userImg: '/images/dynamic/02.jpg', name: '木子李' })
      // 向服务器发送用户基本信息
      if (result.token) {
        router.push('/login')
        await login({
          id: result.token,
          code: 200,
          data: {
            Statistics: {
              isShow: true,
              month: '05',
              income: 0,
              expenditure: 0,
              surplus: 0,
              userImg: '/images/dynamic/01.jpg'
            },
            bills: [
              {
                time: times.format('YYYY-MM-DD'),
                week: null,
                income: null,
                expenditure: null,
                list: []
              }
            ]
          }
        })
      }
    } else {
      alert('密码不一样')
    }
  }
}
</script>

<style lang="less" scoped>
embed {
  width: 70px;
  height: 70px;
  vertical-align: -15px;
  fill: currentColor;
  overflow: hidden;
  margin-top: 120px;
  margin-left: 50%;
  transform: translate(-50%, 0);
}
form {
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  box-sizing: border-box;
  input {
    width: 295px;
    height: 48px;
      font-size: 16px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid rgba(128, 128, 128, 0.3);
  }
  button {
    width: 295px;
    height: 48px;
    background-color: #0091ff;
    border: none;
    color: #fff;
    font-size: 16px;
    line-height: 48px;
    text-align: center;
    border-radius: 5px;
    box-sizing: border-box;
  }
}
a.login{
  display: block;
  width: 100%;
  height: 25px;
  margin-top: 11px;
  text-align: center;
  line-height: 25px;
  font-size:15px;
  color: rgba(0, 0, 0, 0.5);
}
</style>
